<template>
  <div class="chapter-list">
    <el-card class="box-card">
      <div class="chapter-wrap">
        <div class="chapter-title">
          <h2>{{ showModuleName('kck') || '课程库' }}目录</h2>
        </div>
        <div class="clearfix">
          <el-empty
            v-show="!chapterData.length"
            description="暂无数据"
          ></el-empty>
          <el-collapse v-model="active" accordion>
            <el-collapse-item v-for="v in chapterData" :key="v.id" :name="v.id">
              <template slot="title">
                <p
                  class="chapter-name sheng"
                  :title="v.name"
                  @click="handleClick(v)"
                >
                  {{ '第' + (v.index + 1) + '章：' + v.name }}
                </p>
              </template>
              <div class="chapter-subsection">
                <p
                  class="subsection-name"
                  v-for="m in v.childList"
                  :key="m.id"
                  @click="handleClick(m)"
                  :class="{ active: m.id == curChapter }"
                >
                  {{ '第' + (m.index + 1) + '节：' + m.name }}
                </p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getSession, setSession } from '@/utils/session'
import homeConfig from '@/mixins/homeConfig'
import Bus from '@/utils/bus.js'
export default {
  mixins: [homeConfig],
  data() {
    return {
      active: '',
      courseId: '',
      chapterData: [],
      curChapter: '',
      listQuery: {
        page: 1,
        limit: 999,
        pid: 0,
        courseId: '',
      },
    }
  },
  watch: {
    $route() {
      this.getList()
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.listQuery.courseId =
        this.$route.query.courseId || this.$store.getters.courseId
      let res = await this.$store.dispatch(
        'queryOpenApiSysCourseChapter',
        this.listQuery,
      )
      this.chapterData = res.data
      this.$store.commit('SET_COURSECHAPTER', this.chapterData)
      this.chapterData.forEach((m, idx) => {
        m.index = idx
        m.childList.forEach((n, index) => {
          n.childList = []
          n.index = index
        })
      })
      let curChaper = getSession('curChaper')
      this.chapterData.forEach((v) => {
        if (
          v.childList &&
          v.childList.filter((m) => m.id == curChaper).length
        ) {
          this.active = v.id
          this.curChapter = curChaper
        }
      })
    },
    handleClick(data) {
      this.curChapter = data.type != 1 ? data.id : ''
      let chapterId = ''
      if (data.type == 1 && data.childList.length) {
        chapterId = data.childList.map((v) => v.id).toString()
      } else {
        chapterId = data.id
      }
      if (this.$route.name != 'course-detail' && data.type != 1) {
        setSession('curChaper', data.id)
        this.$router.push({
          name: 'course-detail',
          query: {
            courseId: this.courseId,
            queryMode: this.$route.query.queryMode || 1,
          },
        })
      }
      Bus.$emit('refreshListHomeChapter', { chapterId, page: 1 })
    },
  },
  beforeDestroy() {},
}
</script>

<style scoped lang="scss" >
.chapter-list {
  width: 100%;
  .chapter-wrap {
    min-height: 500px;
    border-left: 5px solid #06a2c9;
    border-bottom: 5px solid #06a2c9;
  }
  .chapter-title {
    height: 90px;
    color: #fff;
    line-height: 90px;
    text-align: center;
    background: #06a2c9;
    overflow: hidden;
    h2 {
      font-size: 26px;
    }
  }
  .chapter-name {
    text-indent: 10px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    width: 90%;
  }
  .chapter-subsection {
    padding: 10px 0;
    background: #f4f4f4;
    p {
      // text-indent: 20px;
      padding: 5px 20px;
      color: #333;
      line-height: 22px;
      font-size: 14px;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #06a2c9;
      }
      // &:hover {
      //   color: var(--colorH1);;
      // }
    }
  }
}
</style>
<style scoped>
.chapter-list >>> .el-card__body {
  padding: 0;
}
.chapter-list >>> .el-collapse-item__content {
  padding-bottom: 0;
}
</style>